<template>
  <div v-for="(category, i) in categoryList" :key="i" class="word-card">
    <div class="word-header">
      {{ category.categoryName }}
    </div>
    <word-list :category="category" />
  </div>
</template>
<script lang="ts" setup>
import WordList from '@/components/word/WordList.vue'
const categoryList = [
  {
    categoryName: '协会/组织',
    categoryId: 11
  },
  {
    categoryName: '微量元素',
    categoryId: 12
  },
  {
    categoryName: '血常规检查',
    categoryId: 13
  },
  {
    categoryName: 'CMP生化血检查',
    categoryId: 14
  },
  {
    categoryName: '血脂检测',
    categoryId: 15
  },
  {
    categoryName: '甲状腺检查',
    categoryId: 16
  }
]
</script>
<style lang="scss" scoped>
.word-card {
  max-width: 980px;
  margin: 0 auto;

  .word-header {
    padding-bottom: 9px;
    margin: 20px 0 20px;
    border-bottom: 1px solid #eee;
  }
}
@media screen and (max-width: 480px) {
  .word-card {
    margin: 0 10px;
  }
}
</style>
